<template>
  <main class="grid-setting py-0">
    <section class="container-fluid container-lg banner mb-8 mb-md-12 mb-lg-20">
      <div class="row justify-content-center">
        <div class="col-3 z-index-2 py-12 py-md-15 pl-0 pl-md-4">
          <div class="d-flex flex-column justify-content-center align-items-center bg-warning
            mr-n20 h-100"
            >
            <h2 class="h4 font-h2-md font-h1-lg text-white font-family-raleway
            border-bottom border-2 border-light mb-3">
              About us
            </h2>
            <h2 class="font-sm font-h6-md text-white-80 text-letter-spacing-3">关于我们</h2>
          </div>
        </div>
        <div class="col-9 banner__img bg-cover"></div>
      </div>
    </section>
    <section class="container mb-12  mb-md-12 mb-lg-20">
      <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-8 col-xl-7">
          <h5 class="h4 text-letter-spacing-2 mb-5 mb-md-8">
            相信生命需要点缀
            <span class="font-xs font-sm-sm font-italic d-block font-weight-normal mt-1">
              Believe that life needs embellishment</span>
          </h5>
          <p class="font-sm font-h6-sm mb-3 mb-md-6"  >
            我们相信生命需要点缀，花赋予我们更缤纷的人生。 <br>
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            是我们对每个人的祝福。
            在喧闹的都市角落，让
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            为你的一天点缀上色彩
            花朵随着季节的变化交替着它的色彩，带给每一个平凡的日常不一样的心情。
            慢下脚步，感受
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            的朝气，将各种美好分享给大家
          </p>
          <p class="font-sm font-h6-sm" >
            我们相信生命需要点缀，花赋予我们更缤纷的人生。
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            是我们对每个人的祝福。
            在喧闹的都市角落，让
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            为你的一天点缀上色彩
            花朵随着季节的变化交替着它的色彩，带给每一个平凡的日常不一样的心情。
            慢下脚步，感受
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            的朝气，将各种美好分享给大家
          </p>
        </div>
      </div>
    </section>
    <section class="container-fluid container-lg mb-8 mb-md-12 mb-lg-20">
      <div class="row justify-content-center">
        <div class="col-12 col-md-6 d-flex flex-column justify-content-center align-items-center
          mb-6 mb-md-0 px-md-0 px-lg-4" >
          <img class="img-cover img-fluid"
            src="../../assets/images/about/people.jpg" alt="花與笑容">
        </div>
        <div class="col-12 col-sm-10 col-md-6 d-flex flex-column justify-content-center
          align-items-center px-lg-8 px-xl-15" >
          <h5 class="h4 text-letter-spacing-2 mb-4 text-center">
            让幸福变得更简单
            <span class="font-xs font-sm-sm font-italic d-block font-weight-normal mt-1">
              Make happiness easier</span>
          </h5>
          <p class="font-sm font-h6-sm mb-2">
            为你传递一份纯粹而美好的心意，让「幸福」变得更简单。<br>
          </p>
          <p class="font-sm font-h6-sm">
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            陪伴着每一个人记忆生命中的美好片段。
            量身打造专属于你们的回忆与感动，为「幸福」点上印记，
            透过无数个独一无二的花礼，见证每个重要时刻。 <br>
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            精致高贵的设计，精准描绘出「幸福」的形状，细心对待每一位顾客，
            <router-link class="font-family-raleway hover--shadowLine"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            永远为你献上最真诚的祝福，用行动来表达我们的追求。
            能让你在生活中的每个当下，能够使美好时刻更加美好。
          </p>
        </div>
      </div>
    </section>
    <section class="container mb-8 mb-md-12 mb-lg-20">
      <div class="row mb-8 mb-md-12">
        <div class="col text-center">
          <h3 class="font-h4 font-h3-xs font-weight-normal text-letter-spacing-3
            border-bottom border-warning d-inline pb-2">Serivce</h3>
        </div>
      </div>
      <ol class="row list-unstyled">
        <li class="col-6 col-md-3 text-center mb-6">
          <div class="serivce__img-1 bg-cover rounded-circle mb-n10"
            style="padding-top: 100%"></div>
          <span class="h6 font-h5-md font-family-raleway text-white text-letter-spacing-1
            d-inline-block border-bottom pb-1 mb-5">01</span>
          <h4 class="h5 font-h4-md text-base mb-2">Design</h4>
          <p class="px-lg-5">
            花艺设计｜大型花礼｜花束｜盆花｜恒星花｜干燥花
          </p>
        </li>
        <li class="col-6 col-md-3 text-center mb-6" >
          <div class="serivce__img-2 bg-cover rounded-circle mb-n10"
            style="padding-top: 100%"></div>
          <span class="h6 font-h5-md font-family-raleway text-white text-letter-spacing-1
            d-inline-block border-bottom pb-1 mb-5">02</span>
          <h4 class="h5 font-h4-md text-base mb-2">Garden</h4>
          <p class="px-lg-5">
            空间造景｜住宅庭院｜活动展场｜商业空间花艺规划
          </p>
        </li>
        <li class="col-6 col-md-3 text-center mb-6" >
          <div class="serivce__img-3 bg-cover rounded-circle mb-n10"
            style="padding-top: 100%"></div>
          <span class="h6 font-h5-md font-family-raleway text-white text-letter-spacing-1
            d-inline-block border-bottom pb-1 mb-5">03</span>
          <h4 class="h5 font-h4-md text-base mb-2">Wedding</h4>
          <p class="px-lg-5">
            客制化主题规划｜新娘捧花｜婚礼精品花礼｜灯光音响统筹
          </p>
        </li>
        <li class="col-6 col-md-3 text-center mb-6" >
          <div class="serivce__img-4 bg-cover rounded-circle mb-n10"
            style="padding-top: 100%"></div>
          <span class="h6 font-h5-md font-family-raleway text-white text-letter-spacing-1
            d-inline-block border-bottom pb-1 mb-5">04</span>
          <h4 class="h5 font-h4-md text-base mb-2">Exhibition</h4>
          <p class="px-lg-5">
            活动会场布置｜品牌发表会｜私人派对｜商业花艺规划
          </p>
        </li>
      </ol>
    </section>
    <section class="container access">
      <div class="row pb-5 pb-xs-10 pb-sm-12 pb-lg-20">
        <div class="col-10">
          <div class="access__inner text-center">
            <h3 class="h5 font-h3-sm font-h2-lg font-weight-normal text-md-left
              mb-1 mb-md-2  pt-2 pt-xs-3 px-md-2 px-lg-6">Access</h3>
            <img class="img-cover w-100"
              src="../../assets/images/about/access.jpg" alt="实体店家">
          </div>
        </div>
        <div class="col-12 col-sm-10 col-md-7 d-flex
          justify-content-center mt-2 mt-lg-7 mt-xl-9 mx-auto px-0">
          <dl class="bg-white p-2" >
            <div class="mb-2 mb-md-3 mb-xl-5">
              <dt class="font-h6 d-sm-inline badge badge-light mr-2">门市位置</dt>
              <dd class="d-sm-inline">湖北省武汉市洪山区杨家湾五环天地</dd>
            </div>
            <div class="mb-2 mb-md-3 mb-xl-5">
              <dt class="font-h6 d-sm-inline badge badge-light mr-2">电话号码</dt>
              <dd class="d-sm-inline">02-1234-1234</dd>
            </div>
            <div class="">
              <dt class="font-h6 d-sm-inline badge badge-light mr-2">营业时间</dt>
              <dd class="d-sm-inline">9:30 ~ 18:30</dd>
            </div>
          </dl>
        </div>
      </div>
    </section>
    <section class="container-fluid bg-gradual">
      <div class="row justify-content-center py-6 py-sm-8 pt-lg-10">
        <div class="col text-center">
          <p class="font-sm font-h6-sm text-info mb-4">
            追求精致高贵的设计与服务至上的理念<br>
            把爱化成行动来表达我们
            <router-link class="font-family-raleway hover--shadowLine text-dark"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            的祝福<br>
            <router-link class="font-family-raleway hover--shadowLine text-dark"
              :to="{ name: 'Home' }">「心花怒放」</router-link>
            提供各种花束、祝贺花礼篮及婚礼布置
            <span class="pt-4 d-block"> 欢迎您莅临</span>
          </p>
        </div>
      </div>
    </section>
  </main>
</template>

<style lang="scss" scoped>
// 僅限 image url
.banner__img {
  background-image: url("../../assets/images/about/banner.jpg");
}
.serivce__img {
  &-1 {
    background-image: url('../../assets/images/serivce/design.jpg');
  }
  &-2 {
    background-image: url('../../assets/images/serivce/Garden.jpg');
  }
  &-3 {
    background-image: url('../../assets/images/serivce/wedding.jpg');
  }
  &-4 {
    background-image: url('../../assets/images/serivce/event.jpg');
  }
}
</style>
